<template>
    <div>
        <div class="panel _stretch">
            <div class="panel-head">
                <div class="panel-head-l">整页 panel + 图表</div>
            </div>
            <div class="panel-body flex-col">
                <el-alert title="chart-box 默认高度为 100%，需要修改高度时可以为 chart-box 添加 style"
                          type="success"
                          :closable="false">
                </el-alert>
                <div class="flex1">
                    <div class="chart-box">
                        <div ref="chart0"
                             class="chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const fChartOption = (data, oConf) => {
        return {
            title: {
                text: '图表示例',
                left: 'center',
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '60%'],
                    label: {
                        show: true,
                        color: '#7F7F7F',
                        fontSize: 14
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '本科40%' },
                        { value: 735, name: '大专10%' },
                        { value: 580, name: '博士12%' },
                        { value: 484, name: '硕士研究生38%' }
                    ]
                }
            ]
        };
    }
    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            this.oChartApi = null;
            return {}
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            this.oChartApi = this.$WIV.fInitEcharts(this.$refs.chart0, {
                data: [],
                optionFactory: fChartOption//生成绘图option的自定义方法
            });
        },
        beforeDestroy() {
            //组件销毁时，需手动调用 echart 图表的销毁方法，避免内存泄漏
            this.oChartApi.fDestroy();
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //*** 其他
        }
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet" scoped>
</style>
